<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>本地图片压缩工具</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="upload-section">
      <div class="drop-zone" id="dropZone">
        <span>拖放图片文件至此或</span>
        <input type="file" id="fileInput" accept="image/*">
      </div>
    </div>
    
    <div class="controls-section">
      <div class="control-group">
        <label>压缩质量：</label>
        <input type="range" id="quality" min="0" max="1" step="0.1" value="0.8">
        <span id="qualityValue">80%</span>
      </div>
      <div class="control-group">
        <label>最大宽度：</label>
        <input type="number" id="maxWidth" value="1920">
      </div>
      <button id="compressBtn">开始压缩</button>
    </div>

    <div class="preview-section">
      <div class="image-container">
        <div class="image-box">
          <h3>原始图片</h3>
          <canvas id="originalCanvas"></canvas>
        </div>
        <div class="image-box">
          <h3>压缩后图片</h3>
          <canvas id="compressedCanvas"></canvas>
        </div>
      </div>
      <a id="downloadLink" class="download-btn" style="display:none">下载压缩文件</a>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>